<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Control</title>


    <link rel="stylesheet" href="{{ url_for('static', filename='resources/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='resources/toastr.min.css') }}">

    <script src="{{ url_for('static', filename='resources/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='resources/toastr.min.js') }}"></script>
    <script src="{{ url_for('static', filename='resources/socket.io.js') }}"></script>
    <style>
    </style>
</head>
<body>
    <div class="container d-flex justify-content-center align-items-center" style="height: 100vh;">
        <div class="text-center">
            <h3>摄像头控制</h3>
            <div class="row mb-4">
                <div class="col-md-12">
                
                <div class="mb-3">
                    <label for="cameraSelect" class="form-label">选择摄像头</label>
                    <select id="cameraSelect" class="form-select">
                        <option value="0">摄像头 0</option>
                        <option value="1">摄像头 1</option>
                        <option value="2">摄像头 2</option>
                        <option value="3">摄像头 3</option>
                        <option value="4">摄像头 4</option>
                        <option value="5">摄像头 5</option>
                        <option value="6">摄像头 6</option>
                        <option value="7">摄像头 7</option>
                        <option value="8">摄像头 8</option>
                        <option value="9">摄像头 9</option>
                        <option value="10">摄像头 10</option>
                    </select>
                </div>
                <br>
                <img id="videoFeed">
                <br>

                <table class='table'>
                    <tr><td><button id="startCameraBtn" class="btn btn-success w-100">打开摄像头</button></td></tr>
                    <tr><td><button id="stopCameraBtn" class="btn btn-danger w-100">关闭摄像头</button></td></tr>
                    <tr><td> <button id="takePictureBtn" class="btn btn-primary w-100">拍照</button></td></tr>
                    <tr><td><button id="getCameraIndexListBtn" class="btn btn-primary w-100">有效的摄像头</button></td></tr>
                </table>

            </div>

        </div>
    </div>
</div>

    <script>
        toastr.options = {
            "closeButton": true,
            "positionClass": "toast-top-center"
        }

        const socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);


        // 获取选择的摄像头 ID
        function getSelectedCameraId() {
            return document.getElementById("cameraSelect").value;
        }

        // 打开摄像头
        document.getElementById("startCameraBtn").addEventListener("click", function() {
            console.log('打开摄像头');  // 调试日志
            console.log('选择的摄像头 ID:', getSelectedCameraId());  // 调试日志
            const cameraId = getSelectedCameraId();
            socket.emit('start_camera', { 'camera_id': cameraId });
        });

        // 关闭摄像头
        document.getElementById("stopCameraBtn").addEventListener("click", function() {
            const cameraId = getSelectedCameraId();
            socket.emit('stop_camera', { 'camera_id': cameraId });
 
        });

        socket.on('stop_camera', function (data) {
             console.log('Stop camera:', data);
	     if(data.status == 'ok')
	     {
		   toastr["success"]('Camera Stopped.');
	     }
             else
	     {
                   toastr["warning"]('Failed!');
	     }
	
         });



        // 拍照
        document.getElementById("takePictureBtn").addEventListener("click", function() {
            const cameraId = getSelectedCameraId();
            console.log('拍照');  // 调试日志
            console.log(cameraId);

            socket.emit('take_picture', { 'camera_id': cameraId });
        });


        // 实时显示摄像头画面
        socket.on('video_frame', function (data) {
            //console.log('接收到的视频数据:', data);  // 调试日志
            document.getElementById('videoFeed').src = 'data:image/jpeg;base64,' + data.frame;

        });


        // 拍照成功提示
        socket.on('picture_taken', function(data) {
            //alert('照片已保存: ' + data.image_url);
            console.log('picture_taken');
            console.log(data);
            if (data.status=='ok')
            {
               // alert('照片已保存: ' + data.image_url);
               toastr["success"]('照片已保存: ' + data.image_url);
            }
            
        });


        // 获取有效的摄像头index 列表
        document.getElementById("getCameraIndexListBtn").addEventListener("click", function() {
            socket.emit('get_camera_index_list', {});
 
        });
       
        socket.on('camera_index_list', function (data) {
            console.log('获取有效的摄像头index:', data);  

            //empty cameraSelect options and binding each data to it
            const cameraSelect = document.getElementById("cameraSelect");
            cameraSelect.innerHTML = ''; // Clear existing options

            data.cam_idx_lst.forEach(function(index) {
                const option = document.createElement("option");
                option.value = index;
                option.text = '摄像头 ' + index;
                cameraSelect.appendChild(option);
            });

            toastr["success"]('Camera Index update OK.');
           
        });


    </script>
</body>


</html>
